import React from 'react'
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';
import {Tools,SearchBar,Icon,Button } from 'weaver-mobile';
import { withRouter } from 'react-router-dom';
import { SearchAdvanced,ListViewPage } from 'weaver-mobile-page';
import Incoice_v from '../../public/Incoice-v';
import {toThousands,takeOutThousands} from '../../util/common';
const getLabel = Tools.getLabel;

@withRouter
@inject ('walletStore')
@observer
class ToWallet extends React.Component {
    constructor(props){
        super(props);
    }

    static defaultProps = {
        prefixCls:"fna-toWallet"
    }

    componentWillMount(){
        const {location:{pathname},walletStore} = this.props;
        const {initStore} = walletStore;
        initStore(pathname);
    }
    

    componentDidMount() {
        const {walletStore,checkStatusquey,invoiceIds,info} = this.props;
        const {getToTicketHolderAS,getTicketHolderList} = walletStore;
        let params = {
            checkStatusquey:checkStatusquey,
            id:info.id,
            valueId:info.valueId,
            invoiceIds:invoiceIds,
        }

        getToTicketHolderAS(params);
        getTicketHolderList(params);

        
    }

    componentWillUnmount(){
        const {walletStore} = this.props;
        const {clearAllData,resetForm} = walletStore;
        clearAllData();
        resetForm();
    }

    render() {
        const { walletStore,prefixCls } = this.props;
        const { search,setStateParams,stateParams,nameQuery,setNameQuery,listViewPageData } = walletStore;

        return (
            <div className={`${prefixCls}`}>
                <SearchBar
                    className="search-select"
                    placeholder="Search"
                    showExtraButton
                    extraButton={[
                        { key: 'advanced', show: <Icon key="filter-o" type="filter-o" /> },
                    ]}
                    value={nameQuery}
                    onChange={(val) => setNameQuery(val)}
                    onExtraButtonClick={(key) => { this.props.history.push(search.path) }}
                    onSubmit={(value)=>this.doSerch(value,0)}
                />
                <SearchAdvanced
                    store={search}
                    buttonGroupData={this.getSearchFormBtn()} 
                />
                {this.getTabPage()}

                <footer className={`${prefixCls}-footer`} >
                                
                    {<div className={`${prefixCls}-footer-left`}>
                        {listViewPageData.isSelectedAll ? 
                        <div onClick={()=>{listViewPageData.selectNone();setStateParams({onRowSelect:[],allMoney:0})}}><Icon type="check-circle" color={'#55b1f9'} size={'xs'}/>{getLabel('387379','取消全选')}</div> 
                        : <div onClick={()=>{listViewPageData.selectAll();this.onRowSelect([],listViewPageData.data,true)}}><Icon type="uncheck" color="#ccc" size={'xs'}/>{getLabel('556','全选')}</div>}
                    </div>}
                    <div className={`${prefixCls}-footer-middle`}>
                        <span>{getLabel(18609,'共')}<span className={'money'} style={{margin:'0 5px'}}>{stateParams.onRowSelect.length}</span>{getLabel(18256,'条')}，</span>
                        <span>{getLabel(358,'合计')}：<span className={'money'}>{toThousands(stateParams.allMoney.toFixed(2))}</span></span>
                    </div>
                    <div className={`${prefixCls}-footer-right`}>
                        <Button type="primary" disabled={stateParams.onRowSelect.length > 0 ? false : true}  style={{'border':0}} onClick={this.handleSubmit}>{getLabel(826,'确定')}</Button>
                    </div>
                </footer>

            </div>
                

        )
    }

    getSearchFormBtn = ()=>{
        const { walletStore} = this.props;
        const {resetForm} = walletStore;
        const btns = [
          { key: 'reset', text: getLabel(2022,"重置"), onClick: () => {resetForm()}},
          { key: 'submit', text: getLabel(388113,"搜索"),onClick: () => {this.doSerch('',1)}, type: 'primary',}
        ]
        return btns;
    }       

    //获取 tabPage
    getTabPage = () =>{
        const { walletStore,tjfpfieldType } = this.props;
        const { listViewPageData } = walletStore;

        return (
            <div className={`fna-towallet-invoice`}>
                <ListViewPage.Normal
                    multipleCheck={tjfpfieldType}
                    rowKey={'id'}
                    style={{height:"calc(100% - 94px)"}}
                    className={'wf-agent-list-view-page'}
                    showCheck={true}
                    withSwipeAction={true}
                    store={listViewPageData}
                    getTemplate={this.getTemplate}
                    onRowSelect={(v,d)=>{this.onRowSelect(v,d)}}
                    // onRowClick={}
                />
            </div>
        )     

    }

    //获取模板  报销流程
    getTemplate = () => {
        const newTemplate = {
            default: [
                {
                    key: 'col1',
                    // style: { flex: '0 0 auto'},
                    render: (data) => {
                        let {id,invoiceNumber,billingdate,seller,taxincludedprice,invoicesource_newspan} = data;
                        // console.log('data',data)
                        return(
                            <div key={id} style={{backgroundColor: '#F3F7FE', backgroundClip: 'padding-box',paddingTop:'10px',paddingBottom:'10px'}}>
                                <div className={"fna-incoice-v"}>
                                    <h4><div><span>{getLabel(900,'发票号码')}</span><span>{invoiceNumber}</span></div></h4>
                                    <img src="/images/fna/fnaMobile/incoice-split.png" />
                                    <div>{getLabel(17213,'开票日期')} : {billingdate}</div>
                                    <div>{getLabel(131005,'销售方')} : {seller}</div>
                                    <div>{getLabel(131011,'价税合计')} : {taxincludedprice}</div>
                                    <div>{getLabel(132203,'发票来源')} : {invoicesource_newspan}</div>
                                </div>
                            </div>
                        )
                    }
                },  

                    
            ],
        };

        return newTemplate;
    }  
    
    doSerch = (value,type) =>{
        const {walletStore,checkStatusquey,info,invoiceIds} = this.props;
        const {getTicketHolderList,options,search,setNameQuery} = walletStore;
        const {form} = search;
        const {formParams} = form;

        value = value.trim();

        if(type == 1){
            for(let i=0;i<options.length;i++){
                if(options[i].key == formParams.advQry_invoiceType){
                    setNameQuery(options[i].showname)
                    break;
                }
            }
        }else{
            for(let i=0;i<options.length;i++){
                if(options[i].showname == value){
                    form.updateField('advQry_invoiceType', options[i].key);
                    break;
                }
            }
        }
        
        let params = {
            checkStatusquey:checkStatusquey,
            ...formParams,
            nameQuery:value,
            id:info.id,
            valueId:info.valueId,
            invoiceIds:invoiceIds,
        }
        
        getTicketHolderList(params); 
        if(type == 1){
            this.props.history.go(-1);
        }
    }

    handleSubmit = () =>{
        const { walletStore,history,reset_tjfj,invoiceIds } = this.props;
        const { stateParams } = walletStore;

        let ids = invoiceIds;

        for(let i=0;i<stateParams.onRowSelect.length;i++){
            if(ids == 'undefined' || ids == undefined || ids == ''){
                ids = stateParams.onRowSelect[i];
            }else{
                ids += ','+stateParams.onRowSelect[i];
            }
            
        }
        reset_tjfj(ids);
        history.go(-1)

    }

    //点击行 复选框
    onRowSelect = (value,datas,selectAll) =>{
        const {walletStore} = this.props;
        const {setStateParams} = walletStore;

        let money = 0;
        for(let i=0,len = datas.length;i<len;i++){
            if(datas.length > 0){
                let oldMoey = takeOutThousands(datas[i].taxincludedprice);
                money += parseFloat(oldMoey);
                selectAll ? value.push(datas[i].id) : null;
            }else{
                money = 0;
            }  
        }

        setStateParams({onRowSelect:value,allMoney:money});
    }

}

export default ToWallet;